<!--登录页-->
<template>
  <div>
    <h1>登录</h1>
    <div class="loginDiv">
      <el-form v-model="loginForm" ref="loginForm" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="loginForm.userAccount" placeholder="账号" name="账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.userPassword" placeholder="密码" name="密码"></el-input>
        </el-form-item>
      </el-form>
      <div>普通用户：账号：visitor 密码：随便</div>
      <div>管理员：账号：admin 密码：随便</div>
    </div>
    <el-button plain @click="gotoHomePage">去首页</el-button>
    <el-button plain @click="login(0)">登录为普通用户</el-button>
    <el-button plain @click="login(1)">登录为管理员</el-button>
  </div>

</template>

<script>
export default {
  name: "LoginPage",
  data() {
    return {
      loginForm:{
        userAccount: 'visitor',
        userPassword: 'xxxxxx'
      }
    }
  },
  methods: {
    gotoHomePage(){
      this.$router.push('/home')
    },
    login(type) {
      let msg = '普通用户'
      if (type === 1) {
        this.loginForm.userAccount='admin'
        msg = '管理员'
      }else {
        this.loginForm.userAccount='visitor'
      }
      console.log(this.loginForm)
      this.$store.dispatch('app/Login', this.loginForm).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message({
            message: "恭喜你，登录成为" + msg,
            type: "success",
          });
          this.$router.push('/home')
        } else {
          this.$message({
            message: "你的账号或密码错误,请重新输入",
            type: "error",
          });
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.loginDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 20px;
  //align-items: center;
}

</style>
